// import { onMounted, onBeforeUnmount } from 'vue'

const scale = {
  width: '1',
  height: '1',
};

//初始化useDraw函数时需要传入组件实例(响应式)
export function useDrawToVue3(appRef, options = { baseWidth: 1920, baseHeight: 1080 }) {
  let drawTiming = null;

  // * 设计稿尺寸（px）
  const baseWidth = options.baseWidth;
  const baseHeight = options.baseHeight;

  // * 需保持的比例（默认1.77778）
  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

  const calcRate = () => {
    if (!appRef.value) return;
    // 当前宽高比
    const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));
    if (appRef.value) {
      if (currentRate > baseProportion) {
        // 表示更宽
        scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5);
        scale.height = (window.innerHeight / baseHeight).toFixed(5);
        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
      } else {
        // 表示更高
        scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5);
        scale.width = (window.innerWidth / baseWidth).toFixed(5);
        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
      }
    }
  };
  const resize = () => {
    clearTimeout(drawTiming);
    drawTiming = null;
    drawTiming = setTimeout(() => calcRate(appRef), 200);
  };

  return {
    calcRate,
    resize,
  };
}

export function useDrawToVue2(appRefName, options = { baseWidth: 1920, baseHeight: 1080 }) {
  // * 设计稿尺寸（px）
  const baseWidth = options.baseWidth;
  const baseHeight = options.baseHeight;

  // * 需保持的比例（默认1.77778）
  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
  return {
    data() {
      return {
        // * 定时函数
        drawTiming: null,
      };
    },
    mounted() {
      this.calcRate();
      window.addEventListener('resize', this.resize, false);
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.resize, false);
    },
    methods: {
      calcRate() {
        const appRef = this.$refs[appRefName];
        if (!appRef) return;
        // 当前宽高比
        const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));
        if (appRef) {
          if (currentRate > baseProportion) {
            // 表示更宽
            scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5);
            scale.height = (window.innerHeight / baseHeight).toFixed(5);
            appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
          } else {
            // 表示更高
            scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5);
            scale.width = (window.innerWidth / baseWidth).toFixed(5);
            appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
          }
        }
      },
      resize() {
        clearTimeout(this.drawTiming);
        this.drawTiming = setTimeout(() => {
          this.calcRate();
        }, 200);
      },
    },
  };
}
